<template>
    <div class="commentMaxBoxClass justify-center align-center">
        <div class="commentCoreBoxClass justify-center align-center">
            <div v-if="$store.state.userinfos&&$store.state.userinfos.avator" class="commentInputBoxClass flex justify-between align-start">
                <vs-avatar circle badge badge-position="top-right">
                    <img v-lazy="$store.state.userinfos.avator" :alt="$store.state.userinfos.nickname">
                </vs-avatar>
                <div class="inputBox flex justify-start align-end">
                    <vs-input color="#7d33ff" border v-model="commentText" placeholder="请输入评论内容"></vs-input>
                </div>
                <vs-button v-if="$store.state.userinfos.avator&&commentText" circle icon success flat @click="submitCommentDataHandle">
                    <i class='bx bx-navigation' ></i>
                </vs-button>
            </div>
            <div v-if="commentdata.length>0" :class="`commontListBoxClass ${$store.state.userinfos&&!$store.state.userinfos.avator?'rt':''}`">
                <div v-for="(c,ci) in commentdata" :key="c.id" :style="(commentdata&&ci==(commentdata.length-1))?'border-bottom:none;':''" class="listItemBoxClass justify-between align-start">
                    <vs-avatar circle badge badge-position="top-right">
                        <img v-lazy="c.avator" :alt="c.nickname">
                    </vs-avatar>
                    <div class="commentMsgBoxClass justify-start align-start">
                        <div class="userNameClass">
                            <div class="nameClass">{{c.nickname}}</div>
                            <div class="timeClass">{{ci+1}}楼 {{c.updated_at|convertTitme}}</div>
                        </div>
                        <div class="msgBoxClass">{{c.comment_content}}</div>
                    </div>
                </div>
            </div>
            <div v-else :class="`commontListBoxClass ${$store.state.userinfos&&!$store.state.userinfos.avator?'rt':''} flex justify-start align-center`">
                <img src="~/assets/images/nocomment.webp">
                <span>暂无评论</span>
            </div>
            <div v-if="collects.length" class="collectsUserBox flex justify-start align-start">
                <h2>收藏用户</h2>
                <div class="line-x"></div>
                <div class="userBox" v-for="u in collects" :key="u.id">
                    <vs-avatar history-gradient circle>
                        <img v-lazy="u.avator">
                    </vs-avatar>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {extendsParams,extendsEncrypte,noScale} from '~/assets/inc/common.js';
import {apis} from '~/assets/inc/apis.js';
export default {
    props:{
        articleid:{
            type:Number,
            default:0,
        },
        commentdata:{
            type:Array,
            default:[],
        },
        collects:{
            type:Array,
            default:[]
        }
    },
    filters:{
        convertTitme:function(value){
            let d = new Date(value * 1000); //根据时间戳生成的时间对象
            let date = (d.getFullYear()) + "-" +
                ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1)) + "-" +
                (d.getDate() < 10 ? '0' + (d.getDate()) : (d.getDate())) + " " +
                ((d.getHours()) < 10 ? '0' + (d.getHours()) : (d.getHours())) + ":" +
                ((d.getMinutes()) < 10 ? '0' + (d.getMinutes()) : (d.getMinutes())) + ":" +
                ((d.getSeconds()) < 10 ? '0' + (d.getSeconds()) : (d.getSeconds()));
            return date;
        }
    },
    data(){
        return{
            commentText:'',
            userInfo:'',
        }
    },
    mounted(){
        if(localStorage.getItem('userinfo')){
            this.userInfo = JSON.parse(localStorage.getItem('userinfo'));
        }
    },
    methods:{
        //提交评论
        async submitCommentDataHandle(){
            if(!this.commentText){
                this.$vs.notification({
                    progress: 'auto',
                    color:'warn',
                    position:'bottom-center',
                    title: 'Dias Softsoft Inc.',
                    text: '您还未输入评论内容！'
                })
                return;
            }
            if(!localStorage.getItem('access')){
                this.$vs.notification({
                    progress: 'auto',
                    color:'warn',
                    position:'bottom-center',
                    title: 'Dias Softsoft Inc.',
                    text: '您当前是未登录状态，请您先登录！'
                })
                return;
            }
            this.$store.commit('setLoading',true);
            const params = { id:this.articleid,content:this.commentText };
            extendsEncrypte(params,this.$axios);
            let res = await this.$axios.post(apis.submitCommentAPI,extendsParams(params),{ headers: { 'Authorization': localStorage.getItem('access') }});
            if(res.data.success){
                this.$vs.notification({
                    progress: 'auto',
                    color:'success',
                    position:'bottom-center',
                    title: 'Dias Softsoft Inc.',
                    text: res.data.message
                })
                this.commentText = '';
                this.getCommentDataHandle();
            }else{
                this.$vs.notification({
                    progress: 'auto',
                    color:'warn',
                    position:'bottom-center',
                    title: 'Dias Softsoft Inc.',
                    text: res.data.message
                })
                if(res.data.code==1001){
                    this.$router.replace({path:'/login'});
                }
            }
            this.$store.commit('setLoading',false);
        },
        //获取评论
        async getCommentDataHandle(){
            const params = { id:this.articleid };
            extendsEncrypte(params,this.$axios);
            let res = await this.$axios.post(apis.getCommentAPI,extendsParams(params),{ headers: { 'Authorization': localStorage.getItem('access') }});
            this.commentdata = res.data.message;
        },
    }
}
</script>
<style lang="scss" scoped>
    .commentMaxBoxClass{
        width:100%;
        display: flex;
        .commentCoreBoxClass{
            width:1200px;
            padding:10px 0;
            .collectsUserBox{
                flex-wrap: wrap;
                padding:20px;
                background: var(--white);
                margin-top: 20px;
                border-radius: 20px;
                h2{
                    flex:1 1 auto;
                    width:100%;
                }
                .line-x{
                    margin:10px 0;
                }
                .userBox{
                    flex:0 0 auto;
                    padding:5px;
                }
            }
            .commentInputBoxClass{
                width:100%;
                background:white;
                padding:10px;
                border-radius: 15px 15px 0 0;
                .inputBox{
                    flex:1 1 auto;
                    padding-left: 20px;
                }
            }
            .submitBoxClass{
                width:100%;
                display: flex;
                padding-top: 20px;
            }
            .rt{
                border-radius: 15px !important;
                padding-left: 10px !important;
            }
            .commontListBoxClass{
                width:100%;
                padding-top: 30px;
                background:white;
                border-radius: 0 0 15px 15px;
                padding:10px;
                padding-left: 70px;
                .listItemBoxClass{
                    width:100%;
                    display: flex;
                    border-bottom: 1px solid #ededed;
                    padding: 10px 0;
                    .commentMsgBoxClass{
                        flex:1 1 auto;
                        font-size: 12px;
                        padding-left:20px;
                        .userNameClass{
                            width:100%;
                            margin-bottom: 10px;
                            .nameClass{
                                font-size: 14px;
                                font-weight: bold;
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                            }
                            .timeClass{
                                font-size: 12px;
                                color:#c7c7c7;
                            }
                        }
                        .msgBoxClass{
                            font-size: 14px;
                        }
                    }
                }
                img{
                    width:50px;
                    height: auto;
                }
            }
        }
    }
    @media screen and (min-width:0px) and (max-width:1280px) {
        .commentMaxBoxClass{
            width:100%;
            display: flex;
            .commentCoreBoxClass{
                width:100%;
                padding:1rem 0;
                .collectsUserBox{
                    flex-wrap: wrap;
                    padding:2rem;
                    margin-top: 2rem;
                    border-radius: 2rem;
                    h2{
                        flex:1 1 auto;
                        width:100%;
                    }
                    .line-x{
                        margin:1rem 0;
                    }
                    .userBox{
                        padding:0.5rem;
                    }
                }
                .commentInputBoxClass{
                    width:100%;
                    background:white;
                    padding:1rem;
                    border-radius: 1.5rem 1.5rem 0 0;
                    .inputBox{
                        flex:1 1 auto;
                        padding-left: 2rem;
                    }
                }
                .submitBoxClass{
                    width:100%;
                    display: flex;
                    padding-top: 2rem;
                }
                .rt{
                    border-radius: 1.5rem !important;
                    padding-left: 1rem !important;
                }
                .commontListBoxClass{
                    width:100%;
                    padding:1rem;
                    padding-left: 5.5rem;
                    border-radius: 0 0 1.5rem 1.5rem;
                    .listItemBoxClass{
                        width:100%;
                        display: flex;
                        .commentMsgBoxClass{
                            flex:1 1 auto;
                            font-size: 1.2rem;
                            padding-left:2rem;
                            .userNameClass{
                                width:100%;
                                margin-bottom: 1rem;
                                .nameClass{
                                    font-size: 1.4rem;
                                    font-weight: bold;
                                }
                                .timeClass{
                                    font-size: 1.2rem;
                                    color:#c7c7c7;
                                }
                            }
                            .msgBoxClass{
                                font-size: 1.4rem;
                            }
                        }
                    }
                    img{
                        width:5rem;
                        height: auto;
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .vs-input-parent {
        width:100% !important;
    }
    .vs-input{
        width:100% !important;
    }
    .vs-input-content{
        width:100% !important;
    }
</style>